import React, { Component } from 'react'
import styles from './ShoppingCart.module.css'
interface Props {

}

interface State {
  isOpen: boolean
}
class ShoppingCart extends Component<Props, State> {

  constructor(props: Props) {
    super(props)
    this.state = {
      isOpen: false
    }
  }


  handleClick = (e:React.MouseEvent<HTMLButtonElement,MouseEvent>) => {
    console.log(e.target);      
    console.log(e.currentTarget);    
    if((e.target as HTMLElement).nodeName === 'SPAN'){
      this.setState({
        isOpen: !this.state.isOpen
      })
    }    
  }

  render() {
    return (
      <div className={styles.cartContainer}>

        <button 
          className={styles.button}
          onClick={this.handleClick}
        > <span><i className={[styles.iconfont,styles['icon-shopping_cart']].join(' ')}></i> 购物车 2(件)</span></button>

        <div className={styles.cartDropDown}
          style={{
            display: this.state.isOpen ? "block" : "none"
          }}
        >
          <ul>
            <li>robot 1</li>
            <li>robot 2</li>
          </ul>
        </div>
      </div>
    )
  }
}

export default ShoppingCart
